<template>
	<view class="bgc">
		<!-- 列表页 -->
<swiper circular previous-margin='90rpx' next-margin='90rpx' current='0' @change='swiperChange'>
    <swiper-item v-for='(item,index) in imgArr' :key='index' :class='{"prvImg":(index==prveIndex||(imgArr.length==prveIndex&&index+1==imgArr.length)),
	"nowImg":swiperIndex == index,"nextImg":((nextIndex == index)||(imgArr.length==nextIndex&&index==0))}'>
	<view>
		<image @click="goto" lazy-load mode='scaleToFill' :src='item.background' :class='{"slide-image":true,"active":swiperIndex == index }' />
		<view v-show="swiperIndex == index" :class='{"content":true,"act": swiperIndex == index }'>
		  <view class="Name">{{item.cate_name}}</view>
		  <view class="KeyWord">{{item.title}}</view>
		  <view class="line">{{item.line}}</view>
		<view class="Address">{{item.province.name}} {{item.city.name}} {{item.area.name}} {{item.address}}</view>
		</view>
	</view>
    </swiper-item>
</swiper>
<button @click="goto" class="btn-primary btn-foot">去预约</button> 
	</view>
</template>
<script>
	import { getProductList } from '@/service/common';
	export default {
		name: "Select",
		data() {
			return {
				imgArr: [],
				prveIndex: -1, // 上张图
				swiperIndex: 0, // 当前
				nextIndex: -1, // 下一张
				height:'',
				bottom:''
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
		  getData(){
			getProductList().then(res=>{
				this.changeData(res.data);
			})
		  },
		  changeData(data){ // 获取到数据后处理数据
			this.imgArr=data.categories
			  let _this = this
			setTimeout(()=>{
				uni.createSelectorQuery().select('.nowImg').boundingClientRect(e=>{
					_this.bottom=e.bottom
					_this.swiperChange({detail:{current:0}})
	              }).exec()
			},100)
		  },
		  swiperChange(e) {
			let len = this.imgArr.length
			let swiperIndex = e.detail.current
			this.swiperIndex=swiperIndex
			if (len > 1) {
			  this.nextIndex=swiperIndex < len ? swiperIndex + 1 : 0
			  this.prveIndex=swiperIndex > 0 ? swiperIndex - 1 : len
			}
		  },
		  goto(){
			uni.navigateTo({
				url: '/pages/detail/detail?id=' + this.imgArr[this.swiperIndex].id,
			})
		  }
		}
	}
</script>

<style>
	.bgc{
		position: fixed;
		overflow: hidden;
	}
	swiper {
	  height: 100%;
	  width: 100%;
	 /* position: fixed;
	  bottom: 72px; */
	  position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/* #ifdef H5 */
	margin-top: -50rpx;
	/* #endif */
	}
	
	
	swiper-item {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: flex-start;
	  top: 50% !important;
	  margin-top: -479.5rpx;
	  height: auto !important;
	  border-radius: 9rpx;
	  overflow: hidden;
	}
	/* swiper-item>image{
		position: f;
	} */
	swiper-item>view{
	  z-index: 99;
	  width: 100%;
	  border-radius: 9rpx;
	  overflow: hidden;
	}
	swiper-item.nowImg {
	  z-index: 99;
	  box-shadow: 0rpx 0rpx 50rpx #000;
	  margin-top: -524.5rpx;
	}
	swiper-item.nowImg image{
	  box-shadow: 10rpx 10rpx 5rpx #888888;
	}
	swiper-item.nextImg {
	  left: -45rpx;
	  top: 0;
	}
	
	swiper-item.prvImg {
	  right: -65rpx;
	  top: 0;
	}
	
	.slide-image {
	  height: 958rpx;
	  width: 100%;
	  box-shadow: 0rpx 0rpx 30rpx rgba(0, 0, 0, 0.1);
	  margin: 0rpx 30rpx;
	  z-index: 1;
	}
	
	.active {
	  transition: all 0.2s ease-in 0s;
	  margin: auto;
	  /* width: 544px; */
	  height: 1048rpx;
	}
	
	.content {
	  width: 496rpx;
	  height: 338rpx;
	  background-color: rgba(3, 3, 3, 0.6);
	  position: absolute;
	  color: white;
	  margin-left: 30rpx;
	  text-align: center;
	  z-index: 1;
	  left: 0;
	  right: 0;
	  overflow: hidden;
	  bottom: 47rpx;
	  border-radius: 0 0 9rpx 9rpx;
	}
	
	.act {
	  width: 100%;
	  height: 370rpx;
	  bottom: 0rpx;
	  margin-left: 0rpx;
	}
	
	.Name {
	  font-size: 46rpx;
	  margin-top: 60rpx;
	}
	
	.KeyWord {
	  margin-top: 10rpx;
	  font-size: 28rpx;
	}
	
	.line {
	  width: 400rpx;
	  border-bottom: 2rpx solid #fff;
	  margin: 20rpx auto;
	}
	
	.Address {
	  width: 250rpx;
	  margin: auto;
	  font-size: 20rpx;
	}
	
	.radius {
	  position: fixed;
	  left: 50%;
	  bottom: 20rpx;
	  transform: translate(-50%, -50%);
	}
</style>
